<!-- 

使用实例：
	 <radio-checkbox type="radio" :radioData="radio" :labelStyle="label"></radio-checkbox>
	 <radio-checkbox type="checkbox" :checkboxData="checkbox" :labelStyle="label"></radio-checkbox> 
 -->


<template name="radio-checkbox">
	<view>
		<view v-show="type=='radio' || type==undefined || type==''">
			<view class="sunsin-group">
				<radio-group @change="radioChange">
					<label v-for="(item,index) in radioData" :key="index" :class="[item.checked ? 'checkd' : '']">
						<radio :value="item[value]" :checked="item.checked" />
						<text>{{item[name]}}</text>
					</label>
				</radio-group>
			</view>
		</view>

		<view v-show="type=='checkbox'">
			<view class="sunsin-group">
				<checkbox-group @change="checkboxChange">
					<label v-for="(item,index) in checkboxData" :key="index" :class="[item.checked ? 'checkd' : '']">
						<checkbox :value="item[value]" :checked="item.checked" />
						<text>{{item[name]}}</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		name: 'radio-checkbox',
		props: {
			type: {
				type: String
			},
			name:{
				type:String
			},
			value:{
				type:String
			},
			radioData: {
				type: Array
			},
			checkboxData: {
				type: Array
			}
		},
		methods: {
			radioChange(e) {
				for (let i = 0, len = this.radioData.length; i < this.radioData.length; i++) {
					console.info(this.radioData[i].value,e.detail.value);
					this.radioData[i].value == e.detail.value ? this.radioData[i].checked = true : this.radioData[i].checked = false;
					console.info(this.radioData[i].checked);
				}
				this.$emit('sendRadioData', e.detail.value);
				// console.log('radio-group:', e.detail.value);
			},
			checkboxChange(e) {
				for (let i = 0, len = this.checkboxData.length; i < len; i++) {
					e.detail.value.includes(this.checkboxData[i].value) ? this.checkboxData[i].checked = true : this.checkboxData[i].checked =
						false;
				}
				this.$emit('sendCheckboxData', e.detail.value);
				// console.log('checkbox-group:', e.detail.value)
			}
		}
	}
</script>

<style scoped>
	
	/* 
	如有需求,可以更改radio/checkbox未激活样式!
	可以调边距等一系列css , 硬解码当前测试小程序不支持
	*/
	label {
		font-size: 28upx;
		padding: 10upx 20upx;
		margin: 12upx;
		background-color: #eee;
		border-radius: 10upx;
		line-height: 1;
	}

	radio-group,
	checkbox-group {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* 
		如有需求,可以更改radio/checkbox激活样式!
	 */
	.checkd {
		color: #fff;
		background-color: #FF5C5C;
	}

	.sunsin-group radio,
	.sunsin-group checkbox {
		display: none;
	}

	.sunsin-group {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
</style>
